<!-- 任务二级页面--添加页 -->
<template>
  <view>
    <uni-section >
    			<view class="example">
    				<!-- 自定义表单校验 -->
    				<uni-forms ref="customForm" :rules="customRules" :modelValue="FormData">
    					<uni-forms-item label="任务" required name="name">
    						<input class="input1" @change='ValueChange1' v-model="FormData.name" placeholder="请输入任务" />
    					</uni-forms-item>
            <uni-forms-item label="时间" required name="time">
              	<uni-datetime-picker type="datetimerange" rangeSeparator="至"  v-model="FormData.time"/>
            </uni-forms-item>
            <view class="time">
               开始时间：{{FormData.time[0]!==undefined ? FormData.time[0]:'-' }} <br/>结束时间：{{FormData.time[1]!==undefined ? FormData.time[1]:'-' }}
             </view>
    					<uni-forms-item label="操作人" required name="executor">
    						<input class="input1" @change='ValueChange2' v-model="FormData.executor" placeholder="请输入操作人" />
    					</uni-forms-item>
              <uni-forms-item class="labelBox" label="操作区域" required name="landId">
              	<!-- <uni-easyinput v-model="FormData.area" placeholder="请输入操作地块" /> -->
                      <uni-data-select
                        v-model="FormData.landId"
                        :localdata="range"
                        @change="change"
                      ></uni-data-select>
              </uni-forms-item>
    				</uni-forms>
    				<button type="primary" @click="submit('customForm')">提交</button>
    			</view>
    		</uni-section>
  </view>
</template>
<script>
  import {addTaskDetailApi} from '@/api/task.js'
  export default {
    data() {
      return {
        // 自定义表单数据
    	FormData: {
        name:'',
        executor:'',
        landName:''
       	},
         range: [
                  { value: 0, text: "梅林地块一" },
                  { value: 1, text: "梅林地块五" },
                ],
        // 自定义表单校验规则
        	customRules: {
        					name: {
        						rules: [{
        							required: true,
        							errorMessage: '任务不能为空'
        						}]
        					},
        					executor: {
        						rules: [{
        							required: true,
        							errorMessage: '操作人不能为空'
        						}]
        					},
                  time: {
                  	rules: [{
                  		required: true,
                  		errorMessage: '时间不能为空'
                  	}]
                  },
                  landId: {
                  	rules: [{
                  		required: true,
                  		errorMessage: '地块不能为空'
                  	}]
                  },
                }
      }
    },
    methods:{
      ValueChange1(e) {
        console.log(e.detail.value);
        this.FormData.name = e.detail.value
      },
      ValueChange2(e) {
        console.log(e.detail.value);
        this.FormData.executor = e.detail.value
      },
      // 提交表单
      submit(ref) {
        console.log(this.FormData);
      				this.$refs[ref].validate().then(res => {
      					console.log('success', res);
      					uni.showToast({
      						title: `任务提交完成`
      					})
                this.handleSubmit()
                this.addTaskDetail(this.FormData)
      				}).catch(err => {
      					console.log('err', err);
      				})
              // this.addTaskDetail(this.customFormData)
              // console.log(this.customFormData);
      			},
         // 添加任务
        async addTaskDetail (formData) {
           const res = await addTaskDetailApi(formData)
           console.log(res);
           this.FormData ={}
           this.time=[]
         },
         // 切换表单
               change(e) {
                 console.log("e:", e);
                 if(e===0) {
                   this.FormData.landName = '梅林地块一'
                 } else {
                   this.FormData.landName = '梅林地块二'
                 }
               },
            // 
                   handleSubmit() {
                     // 获取 time 字段的值
                     const [startTime, endTime] = this.ormData.time;
                     
                     // 将 time 字段的值赋值给 startTime 和 endTime 字段
                     this.FormData.startTime = startTime;
                     this.FormData.endTime = endTime;
                     delete this.FormData.time;
                   },
 
    },
    mounted() {
    }
  }
</script>
<style lang="scss" scoped>
.example {
  padding: 30rpx 30rpx;
}
::v-deep .uni-forms-item__label {
  width: 150rpx !important;
}
.time {
  margin: 0 0 30rpx 8rpx;
  color: #606266;
}
.input1 {
  height: 70rpx;
  padding-left: 20rpx;
  border: 1rpx solid #e2e2e2;
  border-radius: 5rpx;
}
</style>